<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>life</title>
</head>
<script src="./node_modules/vue/dist/vue.js"></script>
<body>
<div id="life">
    <input type="text" v-model="message">
    <h2>{{message}}</h2>

</div>
</body>

<script>
   new Vue({
        el:'#life',
        data:{
          message:"药水哥"
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log(this.data);
            console.log(this.$data)
        },
       updated: function () {
           console.group('updated 更新完成状态===============》');
           console.log("%c%s", "color:red", "el     : " + this.$el);
           console.log(this.$el);
           console.log("%c%s", "color:red", "data   : " + this.$data);
           console.log("%c%s", "color:red", "data   : " + this.data);
           console.log("%c%s", "color:red", "message: " + this.message);
           console.log("%c%s", "color:red", "message: " + this.$message);
       }
    });
</script>
</html>